<template>
  <!-- <a-card :bordered="false"> -->
    <div style="overflow: hidden;height: 80vh;">
      <!-- <img  src="../../../public/tmp/c.jpg" /> -->
      <div style="display: flex; justify-content: space-between;">
        <!-- 开票状态 -->
        <div style="width: 33%;border: 1px solid #ccc; background: #fff; box-sizing: border-box;padding: 20px; border-radius:5px; position: relative;">
          <!-- <a-button icon="redo" @click="refresh0"
            style="border-radius: 50%; border: 1px dashed #ccc; position: absolute; right: 20px; "
            size="small"></a-button> -->
          <h4>开票统计</h4>
          <a-divider />
          <a-skeleton v-if="loading0" />
          <div class="bottom" v-else>
            <div>
              <p>开票数量</p>
              <p style="font-size: 24px;color: #000;">{{ data[0].Quantity }}<span style="font-size: 16px;"></span></p>
            </div>
            <div>
              <p>开票金额</p>
              <p style="font-size: 24px;color: #000;">{{ data[0].Total }}<span style="font-size: 16px;"></span></p>
            </div>
          </div>
        </div>
        <!-- 出库状态 -->
        <div style="width: 33%;border: 1px solid #ccc; background: #fff; box-sizing: border-box;padding: 20px; border-radius:5px; position: relative;">
          <!-- <a-button icon="redo" @click="refresh1"
            style="border-radius: 50%; border: 1px dashed #ccc; position: absolute; right: 20px; "
            size="small"></a-button> -->
          <h4>出库统计</h4>
          <a-divider />
          <a-skeleton v-if="loading1" />
          <div class="bottom" v-else>
            <div>
              <p>出库数量</p>
              <p style="font-size: 24px;color: #000;">{{ data[1].Quantity }}<span style="font-size: 16px;"></span></p>
            </div>
            <div>
              <p>出库金额</p>
              <p style="font-size: 24px;color: #000;">{{ data[2].Total }}<span style="font-size: 16px;"></span></p>
            </div>
          </div>
        </div>
        <!-- 签收状态 -->
        <div style="width: 33%;border: 1px solid #ccc; background: #fff; box-sizing: border-box;padding: 20px; border-radius:5px; position: relative;">
          <!-- <a-button icon="redo" @click="refresh2"
            style="border-radius: 50%; border: 1px dashed #ccc; position: absolute; right: 20px; "
            size="small"></a-button> -->
          <h4>签收统计</h4>
          <a-divider />
          <a-skeleton v-if="loading2" />
          <div class="bottom" v-else>
            <div>
              <p>签收数量</p>
              <p style="font-size: 24px;color: #000;">{{ data[2].Quantity }}<span style="font-size: 16px;"></span></p>
            </div>
            <div>
              <p>签收金额</p>
              <p style="font-size: 24px;color: #000;">{{ data[2].Total }}<span style="font-size: 16px;"></span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- </a-card> -->
</template>

<script>

export default {
  data() {
    return {
      loading0: false,
      loading1: false,
      loading2: false,
      url: '',
      data:[],
    }
  },
  mounted() {
    // this.getInvoicing();
    // this.getSign();
    // this.getOutbound();
    this.getDataList();
  },
  methods: {
    // //获取开票状态
    // getInvoicing() {
    //   this.loading0 = true;
    //   // this.$http.post('/').then(res=>{
    //   //   this.loading = false;
    //   // }).catch(err=>{
    //   //   this.$message.error(err);
    //   // })
    //   setTimeout(() => {
    //     this.loading0 = false;
    //   }, 1000)
    // },
    // //获取出库状态
    // getOutbound() {
    //   this.loading1 = true;
    //   // this.$http.post('/').then(res=>{
    //   //   this.loading = false;
    //   // }).catch(err=>{
    //   //   this.$message.error(err);
    //   // })
    //   setTimeout(() => {
    //     this.loading1 = false;
    //   }, 1000)
    // },
    // //获取签收状态
    // getSign() {
    //   this.loading2 = true;
    //   // this.$http.post('/').then(res=>{
    //   //   this.loading = false;
    //   // }).catch(err=>{
    //   //   this.$message.error(err);
    //   // })
    //   setTimeout(() => {
    //     this.loading2 = false;
    //   }, 1000)
    // },
    // refresh0() {
    //   this.getInvoicing();
    // },
    // refresh1() {
    //   this.getOutbound();
    // },
    // refresh2() {
    //   this.getSign();
    // },
    getDataList(){
      this.$http.post('/InvoiceManagement/Inv_Invoicing/GetMenuStatistics').then(res=>{
        this.data = res.Data.Statistics;
      }).catch(err=>{
        this.$message.error(err);
      })
    },
  },

}
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
</style>
